<script lang="ts">
	// import anime from 'animejs';
	// function demo(e) {
	// 	let a = e.target;

	// 	anime({
	// 		targets: a,
	// 		translateX: -200,
	// 		rotate: 570,
	// 		duration: 500,
	// 		direction: 'alternate',
	// 		easing: 'easeInOutQuad'
	// 	});
	// }
	import { animate, spring } from 'motion';
	function demo(e) {
		let a = e.target;
		animate(
			a,
			{ transform: ['none', 'translateX(-200px) rotate(270deg)', 'none'] },
			{
				duration: 0.5,

				easing: spring({ velocity: 50, damping: 100, stiffness: 200, mass: 2 }),
				direction: 'normal', // "normal", "reverse", "alternate", or "alternate-reverse".
				opacity: { duration: 0.4 },
				// repeat: Infinity
				allowWebkitAcceleration: true
			}
		);
	}
</script>

<ul class="fixed right-10">
	<li
		id="demo1"
		on:mouseenter={demo}
		class="z-10 flex justify-center items-center  w-32 h-32 bg-purple-400  text-2xl my-5  bg-opacity-50  rounded-lg shadow-lg "
	>
		sveltejs
	</li>
	<li
		id="demo2"
		on:mouseenter={demo}
		class="z-20 w-32 h-32 flex justify-center items-center w-32 h-32 bg-yellow-600 text-2xl bg-opacity-50  rounded-lg"
	>
		windicss
	</li>
	<li
		on:mouseenter={demo}
		id="demo3"
		class="z-30 w-32 h-32 flex justify-center items-center w-32 h-32  animate-pulse bg-red-300  text-2xl  bg-opacity-50  rounded-lg my-5"
	>
		Motion
	</li>
	<li
		id="demo4"
		on:mouseenter={demo}
		class="z-40 w-32 h-32 flex justify-center items-center w-32 h-32 animate-pulse  bg-blue-300  text-2xl  bg-opacity-50  rounded-lg"
	>
		threejs
	</li>
</ul>
